<template>
    <div class="classify">
        <div class="search-banner">
            <div class="search">
                <input type="text" name="search" placeholder="搜索商品名称" @click="$router.push('/Search')">
            </div>
            <div class="login">
            </div> 
        </div>
        <div class="pilot">
            <ul>
                <li v-for="item in type" :key="item.id" @click="acvive(item.id)" ><router-link 
                :to="{path:'/classify/news',
                query:{ //params
                        id:item.id,
                        type:item.list
                    }}"
                    :id="item.id">
                    <span :class="{active: num === item.id}">{{item.list}}</span></router-link></li>
                <li v-for="item in type1" :key="item.id" @click="acvive(item.id)"><router-link 
                :to="{path:'/classify/message',
                query:{ //params
                        id:item.id,
                        type:item.list
                    }}"
                    :id="item.id">
                <span :class="{active: num === item.id}">{{item.list}}</span></router-link></li>
            </ul>
        </div>
        <router-view :key="$route.fullPath"></router-view>
    </div>
</template>
<script>
export default {
    name:'classify',
    data() {
        return {
            type:[{
                id:0,
                list:'推荐'
            },{
                id:1,
                list:'手机'
            },{
                id:2,
                list:'智能穿戴'
            },{
                id:3,
                list:'笔记本'}
                ],
            type1:[{
                id:4,
                list:'家电'},{
                id:5,
                list:'生活电器'},{
                id:6,
                list:'厨房电器'},{
                id:7,
                list:'智能家居'},{
                id:8,
                list:'运动出行'},{
                id:9,
                list:'日用百货'}],
                num:0,
        }
    },
    methods: {
        acvive(e){
            localStorage.setItem('num',e)
            this.num = e 
        },
    },
    
    mounted() {
        this.num = localStorage.getItem('num') || 0
        document.getElementById(this.num).click()
    },
}

</script>
<style lang="scss" scoped>
a{
    font-size:13px;
    text-decoration: none;
}

ul{
    list-style-type: none;
}
    .search-banner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 2rem;
        background: #fff;
    }
    .search input{
        width: 13.64rem;
        height: 1.24rem;
        font-size: .56rem;
        padding-left: 1.5rem;
        border-radius: 0.83rem;
        background: #f7f7f7 url('../../assets/images/zoom.png') no-repeat 0.2rem center;
        background-size: 1.06rem;
        margin-left: .68rem;
        margin-top: .38rem;
        border: none;
        color: #a6a6a6;
    }
    .pilot{
        position: fixed;
        top: 2rem;
        left: 0;
        width: 3.8rem;
    }
    ul li {
        width: 3.2rem;
        height: 2rem;
        background: #fefefe;
        padding: .65rem 0;
    }
    span {
        display: block;
        text-align: center;
        color: #666;
    }
    .active {
        color: #333;
        font-weight: 600;
        border-left: .1rem solid rgb(231, 133, 21);
    }
</style>